<%- include header %>
<!--<ul class="nav nav-pills">-->
    <!--<li ><a href="/partnerDynimic">语伴动态</a></li>-->
    <!--<li class="active"><a href="/findPartner">查找语伴</a></li>-->
    <!--<li><a href="/myPartner">我的语伴</a></li>-->
    <!--<li><a href="/myDynimic">我的动态</a></li>-->
<!--</ul>-->
<form method="get" STYLE="margin-top: 50px">
    <div style="margin-bottom: 20px">
        <input type="text" placeholder="<%= __('findPartner').keywords %>" name="keyword" style="width: 15%;margin-bottom: 0px">
        <input type="text" placeholder="<%= __('findPartner').addr %>" name="nowcity" style="width: 15%;margin-bottom: 0px">
        <select name="gender" style="width: 10%;margin-left: 1%;">
            <option id="gender1" value=""><%= __('findPartner').gender %></option>
            <option id="gender2" value="1"><%= __('findPartner').male %></option>
            <option id="gender3" value="0"><%= __('findPartner').woman %></option>
        </select>
        <select name="age" style="width: 10%">
            <option id="age0" value=""><%= __('findPartner').age %></option>
            <option id="age1" value="1"><%= __('findPartner').under %></option>
            <option id="age2" value="2">18-22</option>
            <option id="age3" value="3">23-26</option>
            <option id="age4" value="4">27-35</option>
            <option id="age5" value="5"><%= __('findPartner').above %></option>
        </select>
        <select  name="language" style="width: 10%">
            <option value=""><%= __('findPartner').m_language %></option>
            <% languagess.forEach(function(language,index){%>
            <option value="<%-language.platename%>"><%-language.platename%></option>
            <%})%>
        </select>
        <select  name="studylanguage" style="width: 10%">
            <option value=""><%= __('findPartner').learn_language %></option>
            <% languagess.forEach(function(language,index){%>
            <option value="<%-language.platename%>"><%-language.platename%></option>
            <%})%>
        </select>
        <select  name="country" style="width: 10%">
            <option value=""><%= __('findPartner').nationality %></option>
            <option value="中国"><%= __('findPartner').china %></option>
            <option value="美国"><%= __('findPartner').america %></option>
            <option value="英国"><%= __('findPartner').england %></option>
            <option value="德国"><%= __('findPartner').germany %></option>
            <option value="法国"><%= __('findPartner').france %></option>
            <option value="日本"><%= __('findPartner').japan %></option>
            <option value="韩国"><%= __('findPartner').korea %></option>
        </select>
        <input type="submit" class="btn btn-danger" style="margin-bottom: 0px;;margin-left: 20px" value="<%= __('findPartner').screen %>">
    </div>
</form>
<!--<div style="background-color: white;-moz-border-radius: 5px;-webkit-border-radius: 5px;padding: 10px;padding-top: 20px">-->
    <!--<% if(datas.length==0){%>-->
    <!--<div style="height:200px;background-color: white;border: 1px solid #ffffff;-moz-border-radius: 10px;-webkit-border-radius: 10px;margin-top: 20px;padding: 20px;text-align: center">-->
        <!--<div style="color: #000000;margin-top: 20px;font-size: large;line-height: 150px">当前没有数据!!!</div>-->
    <!--</div>-->
    <!--<%}else{%>-->
        <!--<% datas.forEach(function(data,index){%>-->
            <!--<div style="width: 17.3913%;float: left;text-align: center;margin: 15px">-->
                <!--<img  class="img-rounded" src="<%-data.headSrc%>">-->
                <!--<span style="display: block;margin-top: 10px"><a href="/partnerCenter?username=<%-data.username%>"><%- data.nickname %></a></span>-->
            <!--</div>-->
        <!--<%})%>-->
        <!--<div style="clear: both"></div>-->
    <!--<%}%>-->
<!--</div>-->
<div style="background-color: white;border-radius: 5px;;padding: 10px;padding-top: 20px">
    <% if(datas.length==0){%>
    <div style="height:200px;background-color: white;border: 1px solid #ffffff;-moz-border-radius: 10px;-webkit-border-radius: 10px;margin-top: 20px;padding: 20px;text-align: center">
        <div style="color: #000000;margin-top: 20px;font-size: large;line-height: 150px"><%= __('findPartner').hint %>!!!</div>
    </div>
    <%}else{%>
    <div class="lanrenzhijia">
        <ul>
            <% datas.forEach(function(data,index){%>
            <li style="overflow:hidden;position:relative;width: 153px;float: left;text-align: center;margin: 1%;margin-left: 2%">
                <div style="margin-left: 0px;">
                    <img class="img-rounded" src="<%-data.headSrc%>" style="width: 153px;height: 153px"/>
                    <span style="display: block;margin-top: 10px"><a href="/partnerCenter?username=<%-data.username%>"><%- data.nickname %></a></span>

                </div>
                <div class="rsp" style="width:100%;height:84%;"></div>
                <div class="text" style="color: white;margin-left: 10%;margin-top: 10%">
                    <span style="color: #989898"><b>母语：</b></span><span style="color: #fddd01"><b><%- data.language%></b></span><br>
                    <span style="color: #989898"><b>想学：</b></span><span style="color: #7cc301"><b><%- data.studylanguage%></b></span>
                </div>
            </li>
            <%})%>
        </ul>
        <div style="clear: both"></div>
    </div>
    <%}%>
</div>

<div class="span12">
    <div id="page1"></div>
</div>
<%- include footer %>
<script>

    $(function(){
        //获得浏览器参数


        $.extend({
            getUrlVars: function(){
                var vars = [];
                var hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                console.log(hashes);
                for(var i = 0; i < hashes.length; i++){
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            },
            getUrlVar: function(name){
                return $.getUrlVars()[name];
            }
        });

        //封装浏览器参数
        var composeUrlParams=function(){
            var param='';
            $.each($.getUrlVars(), function(i, item) {
                if(item!='num'){
                    var val=$.getUrlVar(item);
                    if(val) param += "&" + item+"="+val;
                }
            });
            return param;
        }
        var options = {
            currentPage:<%- page.num %>,                //当前页，css样式同其他页不同
            totalPages:<%- page.pageCount %>,           //总页数
            numberOfPages:5,                            //导航最多显示页数
            pageUrl: function(type, page, current) {    //页面跳转
                if(page!=<%- page.num %>){
                    return "/findPartner?num="+ page+composeUrlParams();
                }

            }
        }
        $('#page1').bootstrapPaginator(options);
        WdatePicker({eCont:'showDate',onpicked:function(dp){
            alert('你选择的日期是:'+dp.cal.getDateStr());
        }
        })
        //根据查找条件改变查找下拉列表的默认选项--防止查找过后存在的分页
        <% if(datas.gender=='0'){ %>
            $('#gender3').attr('selected','selected');
        <% }else if(datas.gender=='1'){ %>

            $('#gender2').attr('selected','selected');
        <% } %>
        <% if(datas.age=='1'){%>
            $('#age1').attr('selected','selected');
        <% }else if(datas.age=='2'){ %>
            $('#age2').attr('selected','selected');
        <% }else if(datas.age=='3'){ %>
            $('#age3').attr('selected','selected');
        <% }else if(datas.age=='4'){ %>
            $('#age4').attr('selected','selected');
        <% }else if(datas.age=='5'){ %>
            $('#age5').attr('selected','selected');
        <% } %>

    })
</script>
<script>
    $(function(){
        $(".lanrenzhijia ul li .rsp").hide();
        $(".lanrenzhijia ul li").hover(function(){
                    $(this).find(".rsp").stop().fadeTo(500,0.5)
                    $(this).find(".text").stop().animate({left:'0'}, {duration: 500})
                },
                function(){
                    $(this).find(".rsp").stop().fadeTo(500,0)
                    $(this).find(".text").stop().animate({left:'300'}, {duration: "fast"})
                    $(this).find(".text").animate({left:'-300'}, {duration: 0})
                });
    });
</script>

